<template>
    <div class="app-container">
        <el-row class="wrapper node">
            <el-col :span="24" class="warp-main">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>查询条件</p>
                    <!--工具条-->
                    <el-col :span="24" class="toolbar" style="padding-top:10px">
                        <el-form :inline="true" :model="filters">
                            <!--
                            <el-form-item>
                                <el-button type="primary" @click="calcAddNode" icon="el-icon-plus">添加计算节点</el-button>
                            </el-form-item>
                            -->
                            <el-form-item>
                                <el-select v-model="physicalName"  @visible-change="downUpBox" clearable  @change="physicalGroupChange" placeholder="选择物理分组查询">
                                    <el-option v-for="item in partitions" :key="item.name_en" :label="item.name_cn" :value="item.name_en">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="search">
                                <el-input placeholder="搜索" suffix-icon="el-icon-search" v-model="listQuery.queryKey" :on-icon-click="nodeDataQuery">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="nodeReflush">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="iconfont icon-msnui-shezhi" @click="setPartition">设置分区</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <!--数据列表-->
                    <el-table v-loading="loadingNodeDataTable" :data="nodeData" ref="nodeTable" highlight-current-row  @select="nodeChange" @selection-change="selsChange" style="width: 100%;">
                        <!--<el-table-column type="selection" width="50"></el-table-column>-->
                        <el-table-column align="right" label="主机名称" width="100">
                                <template slot-scope="scope">
                                    <el-radio v-model="selectHostName" :label="scope.row.hostName"></el-radio>
                                </template>
                        </el-table-column>
                        <!--<el-table-column prop="hostName" label="主机名称" sortable></el-table-column>-->
                        <el-table-column prop="ip"  label="ip" sortable></el-table-column>
                        <el-table-column prop="status"  label="状态" sortable></el-table-column>
                        <!--<el-table-column prop="podNumbers"  label="容器数" sortable></el-table-column>-->
                        <el-table-column prop="cpu"  label="CPU" sortable></el-table-column>
                        <el-table-column prop="memory" width="100" label="内存" sortable></el-table-column>
                        <!--<el-table-column prop="disk"  label="磁盘" sortable></el-table-column>-->
                        <el-table-column prop="operationDate"  label="运行时间" sortable></el-table-column>
                        <el-table-column prop="startTime"  label="启动时间" sortable></el-table-column>
                        <el-table-column prop="physicalZone"  label="物理分区" sortable></el-table-column>
                    </el-table>

                    <!--工具条删除节点-->
                    <!-- <el-col :span="24" class="toolbar"> -->
                    <!-- <el-button type="danger" @click="batchDeleteBook" :disabled="this.sels.length===0">删除节点</el-button> -->
                    <!-- 分页start -->
                    <!-- <el-pagination @current-change="handleCurrentChange" -->
                    <!-- :current-page.sync="listQuery.page" -->
                    <!-- :page-size="listQuery.pageSize" -->
                    <!-- layout="prev, pager, next" -->
                    <!-- :total="queryTotal" style="float:right;"> -->
                    <!-- </el-pagination> -->
                    <!-- 分页end -->
                    <!-- </el-col> -->

                    <!--添加节点弹框界面-->
                    <el-dialog title="添加计算节点" :visible.sync="addFormVisible" :close-on-click-modal="false">
                        <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                            <el-form-item label="1.">
                                <p class="nbd">先根据你的操作系统安装1.12.6版本的Docker</p>
                            </el-form-item>
                            <el-form-item label="2.">
                                <p class="nbd">请安装以下步骤执行</p>
                                <p class="nbd"> 2.1 **************</p>
                                <p class="nbd"> 2.2 **************</p>
                            </el-form-item>
                            <!-- <el-form-item label="" prop="description">
                      <el-input type="textarea" v-model="editForm.description" :rows="8"></el-input>
                    </el-form-item> -->
                            <el-form-item label="注意:" style="margin-top:30px;">
                                <p class="nbd">新添加的主机需要与Mastert同一内</p>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button class="iconfont icon-chehui" @click.native="addFormVisible = false">取消</el-button>
                            <el-button class="iconfont icon-fuxuan" type="primary" @click.native="addSubmit" :loading="addLoading">确定</el-button>
                        </div>
                    </el-dialog>

                    <!--社区分区弹框界面-->
                    <el-dialog title="设置分区" :visible.sync="editFormVisible" :close-on-click-modal="false">
                        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
                            <el-select @change="partitionChange" v-model="partitioName" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in partitions" :key="item.name_en" :label="item.name_cn" :value="item.name_en">
                                </el-option>
                            </el-select>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button class="iconfont icon-chehui" @click.native="editFormVisible = false">取消</el-button>
                            <el-button class="iconfont icon-fuxuan" type="primary" @click.native="editSubmit">确定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { httpClient } from '@/utils/httpClient';
import { projectConfig } from '@/utils/projectConfig';
export default {
    data() {
        return {
            //节点数据
            nodeData: [],
            nodeDataDetial: {},
            // 分页所需的数据
            listQuery: {
                page: 1,
                pageSize: 3,
                queryKey: ''
            },
            queryTotal: 0,//查询节点后的总数
            filters: {
                name: ''
            },
            //物理分组下拉选择查询
            physicalGroupQuery: [],
            partitioName: '',
            physicalName:'',

            //物理分区的数据
            partitions: [],
            // value: '',
            // name_en:'',
            selectPhysicalID: '',
            selectName_En: '',//选中的英文名称，也就是标签
            selectPartName: '',//选中的物理分区名称
            selectHostName: '',//选中的hostname
            sels: [], //列表选中列

            //设置分区界面
            editFormVisible: false, //设置分区界面是否显示
            editLoading: false,
            editFormRules: {
                name: []
            },
            editForm: {
                id: 0,
                name: '',
                author: '',
                publishAt: '',
                description: ''
            },

            //新增相关数据
            addFormVisible: false, //新增界面是否显示
            addLoading: false,
            addFormRules: {
                name: []
            },
            addForm: {
                name: '',
                author: '',
                publishAt: '',
                description: ''
            },
            // 刷新遮罩
            loadingNodeDataTable: false,
        }
    },
    methods: {
        created: function() {
            this.partitionQuery();
        },
// 查询物理分组的名称
        partitionQuery() {
            this.httpClient.httpClientget(this.projectConfig.URL_API_INSTRA_GET_PARTITION, '').then(res => {
                // let _code = res.meta.code;
                // if (_code = this.projectConfig.CODE_OK) {
                //     this.partitions = res.data.items;
                // }
                this.partitions = res.data.items;
            })
        },
// 选择刷新右边的下拉框触发的事件
downUpBox(){
    this.partitionQuery();

},
// 选中刷新右边的下拉框内容触发的事件
        physicalGroupChange(value) {
            this.selectName_En = value;
            // let label=this.selectName_En;
            // let url=this.httpClient.urlParmHandle(this.projectConfig.URL_API_INSTRA_NODE_LABEL,[this.selectName_En]);
            // console.log(url);
            // this.httpClient.httpClientget(url).then(res=>{
            //     let _code=res.meta.code;
            //     if(_code==this.projectConfig.CODE_OK){
            //         this.nodeData = [];
            //         this.queryTotal = res.data.total;
            //         this.nodeData = res.data.items;
            //     }else{
            //         this.$message({
            //             message:"查询失败",
            //             type:"error"
            //         })
            //     }
            // })
            // 上面方法暂时取消
                let parm={queryKey:this.selectName_En};
                this.httpClient.httpClientget(this.projectConfig.URL_API_INSTRA_NODE, parm).then(res => {
                // let _code = res.meta.code;
                // if (_code == this.projectConfig.CODE_OK) {
                //     this.nodeData = [];
                //     this.queryTotal = res.data.total;
                //     this.nodeData = res.data.items;
                // }
                // else {
                //     this.$message({
                //         message: "查询失败",
                //         type: 'error'
                //     })
                // }
                                   this.nodeData = [];
                    this.queryTotal = res.data.total;
                    this.nodeData = res.data.items;
            })


        },
// 选择设置分区里面的下拉框后触发的事件
        partitionChange(value) {
            // let obj = {};
            // obj = this.partitions.find((item) => {
            //     return item.name_en === value;
            // });
            // this.selectName_En = obj.name_en;
            this.selectName_En = value;
        },
// 切换页面
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.nodeDataQuery();



        },
// 刷新
        nodeReflush() {
            this.physicalName='';
            this.listQuery.queryKey='';
            this.nodeDataQuery();
        },

//获取用户列表
        nodeDataQuery() {
            let parm={queryKey:this.listQuery.queryKey}
            // 遮罩开始
            this.loadingNodeDataTable = true;
            this.httpClient.httpClientget(this.projectConfig.URL_API_INSTRA_NODE, parm).then(res => {
                // let _code = res.meta.code;
                // if (_code == this.projectConfig.CODE_OK) {
                //     this.nodeData = [];
                //     this.queryTotal = res.data.total;
                //     this.nodeData = res.data.items;
                // }
                // else {
                //     this.$message({
                //         message: "查询失败",
                //         type: 'error'
                //     })
                // }
                // 遮罩结束
                this.loadingNodeDataTable = false;
                   this.nodeData = [];
                    this.queryTotal = res.data.total;
                    this.nodeData = res.data.items;

            }).catch(error => {
                // 遮罩结束
                this.loadingNodeDataTable = false;
            })
        },
// 勾选了节点信息后触发事件
        nodeChange: function(selection, row) {
            this.selectHostName = row.hostName;
        },
// 
        selsChange: function(sels) {

            this.sels = sels;
        },
//删除--禁用
        // delBook: function(index, row) {
        //     this.$confirm('确认删除该记录吗?', '提示', {
        //         type: 'warning'
        //     }).then(() => {
        //         this.listLoading = true;
        //         //NProgress.start();
        //         let para = {
        //             id: row.id
        //         };
        //         reqDeleteBook(para).then((res) => {
        //             this.listLoading = false;
        //             //NProgress.done();
        //             this.$message({
        //                 message: '删除成功',
        //                 type: 'success'
        //             });
        //             this.nodeDataQuery();
        //         });
        //     }).catch(() => { });
        // },
//显示设置分区的编辑界面
        setPartition: function(index, row) {
            this.editFormVisible = true;

            this.httpClient.httpClientget(this.projectConfig.URL_API_INSTRA_GET_PARTITION, '').then(res => {
                let _code = res.meta.code;
                // console.log(res.data.items);
                if (_code == this.projectConfig.CODE_OK) {
                    this.partitions = res.data.items;
                }
            })
            this.editForm = Object.assign({}, row);
        },
// 设置分区选中里面的内容提交
        editSubmit: function() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {
                        confirmButtonText: "确定",
                        cancleButtonText: '取消'
                        , type: 'warning'
                    }).then(() => {
                        //this.editLoading = true;
                        //NProgress.start();
                        let parm = {
                            nodename: this.selectHostName,
                            label: this.selectName_En
                        }
                        // console.log(this.selectPartName);
                        // this.nodeChange();
                        // console.log(this.selectHostName);
                        if(parm.nodename==''){
                            this.$message({
                                message: '请选择主机!',
                                type: 'warning'
                            });
                            return;
                        }

                        if(parm.label==''){
                            this.$message({
                                message: '物理分区不能为空!',
                                type: 'warning'
                            });
                            return;
                        }
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.selectHostName);
                        this.httpClient.httpClientPost(this.projectConfig.URL_API_INSTRA_SET_PARTITION, parm).then((res) => {
                            // let _code = res.meta.code;
                            // if (_code = this.projectConfig.CODE_OK) {
                            //     this.editLoading = false;
                            //     //NProgress.done();
                            //     this.$message({
                            //         message: '设置成功',
                            //         type: 'success'
                            //     });
                            //     this.$refs['editForm'].resetFields();
                            //     this.editFormVisible = false;
                            //     this.partitioName='';
                            //     this.nodeDataQuery();
                            // }
                            // else {
                            //     this.$message({
                            //         type: "error",
                            //         message: "设置失败"
                            //     })
                            // }
                            
                                this.editLoading = false;
                                //NProgress.done();
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.partitioName='';
                                this.nodeDataQuery();

                        });
                    }).catch(() => {
                        this.$message({
                            message: '已取消，请重新提交',
                            type: 'info'
                        });
                    });
                }
            });
        },

        showSet: function() {
            this.addFormVisible = true;
            this.addForm = {
                name: '',
                author: '',
                publishAt: '',
                description: ''
            };
        },
// 添加计算节点
        calcAddNode: function() {
            this.addFormVisible = true;
            this.addForm = {
                name: '',
                author: '',
                publishAt: '',
                description: ''
            };
        },
//批量删除 --禁用
        // batchDeleteBook: function() {
        //     var ids = this.sels.map(item => item.id).toString();
        //     this.$confirm('确认删除选中记录吗？', '提示', {
        //         type: 'warning'
        //     }).then(() => {
        //         this.listLoading = true;
        //         //NProgress.start();
        //         let para = {
        //             ids: ids
        //         };
        //         reqBatchDeleteBook(para).then((res) => {
        //             this.listLoading = false;
        //             //NProgress.done();
        //             this.$message({
        //                 message: '删除成功',
        //                 type: 'success'
        //             });
        //             this.nodeDataQuery();
        //         });
        //     }).catch(() => {

        //     });
        // }
    },
    mounted() {
        this.nodeDataQuery();
    }
}
</script>

<style>
.node .el-table tr {
    text-align: center;
}

.node .el-bar {
    padding-bottom: 50px;
}

.node .toolbar {
    margin-top: 8px;
}

.node .el-bar .nbd {
    border-bottom: none;
}

.node .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}

.node el-icon-search {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}


</style>